<template>
<!-- 头部 -->
<div class="main-navbar">
  <div class="shrink-btn"><i class="icon iconfont icon-webicon03"></i></div>
  <div class="main-nav">
    <el-dropdown>
      <span class="el-dropdown-link user-info">
        <div class="head-portrait"></div>admin
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>黄金糕</el-dropdown-item>
        <el-dropdown-item>狮子头</el-dropdown-item>
        <el-dropdown-item>螺蛳粉</el-dropdown-item>
        <el-dropdown-item disabled>双皮奶</el-dropdown-item>
        <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</div>
</template>

<script>
// @ is an alias to /src

export default {
  data () {
    return {
    }
  },
  name: "home",
  mounted () {
  },
  methods: {
  },
  components: {
  }
}
</script>
<style scoped>
.main-navbar{
  width: calc(100% - 40px);
  height: 50px;
  padding: 0px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,.08);
}
.shrink-btn{
  overflow: hidden;
}
.shrink-btn i{
  font-size: 30px;
  cursor: pointer;
}
.main-nav{
  height: 50px;
  display: flex;
  align-items: center;
}
.user-info{
  display: flex;
  align-items: center;
  cursor: pointer;
}
.head-portrait{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: green;
  margin-right: 5px;
}
</style>